<template>
    <div class="container">
        <div class="dropdown">
            <div>
                <span>{{ department.name }}</span>
                <div class="icon"></div>
            </div>
            <div class="dropdown-content">
                <div class="item" v-for="item,index in list" 
                    :key="index"
                    @click="handleClick(item)"
                >{{ item.department.name }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        },
        department: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
        handleClick(e) {
            console.log(e.department);
            this.$router.push({
                url: '/index',
                query: {
                    deptId: e.department.id
                }
            })
            this.$router.go(0)
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;

    .dropdown {
        position: relative;
        display: inline-block;

        & > div {
            display: flex;

            span {
                font-size: 20px;
                user-select: none;
            }

            .icon {
                height: 30px;
                width: 30px;
                background: url('../../../../../assets/img/otto/icon-down.png') no-repeat 0px 0px;
                background-size: 100% 100%;
            }
        }


        &:hover .dropdown-content{
            display: block;
        }

        .dropdown-content {
            width: 100%;
            display: none;
            position: absolute;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 10px 10px;
            border: 1px solid #2892FA;
            margin-top: 10px;

            .item {
                height: 40px;
                width: 95%;
                display: flex;
                align-items: center;
                justify-content: center;
                border-bottom: 1px solid #2892FA;
                background: url('../../../../../assets/img/otto/back.png') no-repeat 0px 0px;
                background-size: 100% 100%;
                user-select: none;
                cursor: pointer;
            }
        }
    }
    
   
}

</style>